<template>
  <el-dialog
    v-loading="loading"
    :title="'审批抄送'"
    :visible="show"
    :modal-append-to-body="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    class="create-dialog"
    width="700px"
    @close="closeView"
  >
    <div class="cc-box">
      <el-form :model="ccForm" ref="ruleForm" label-width="100px">
        <el-form-item label="选择抄送类型">
          <el-radio-group v-model="ccForm.type" @change="roleChange()">
            <el-radio :label="0">按照角色</el-radio>
            <el-radio :label="1">按照部门</el-radio>
            <el-radio :label="2">按照人员</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="ccForm.type == '0'">
          <el-form-item label="选择抄送角色">
            <el-select
              v-model="ccForm.roleId"
              :popper-append-to-body="false"
              popper-class="select-popper-class"
              filterable
              multiple
            >
              <el-option-group
                v-for="group in groupsList"
                :key="group.pid"
                :label="group.name"
              >
                <el-option
                  v-for="item in group.list"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
        </template>
        <div class="initTable_search" v-if="ccForm.type == '1'">
          <span>选择抄送部门：</span>
          <xh-structure-cell-mul
            :curVal="this.ccForm.simpleDeptList"
            class="xh-structure-cell"
            @valueChange="structureChangeRoi"
            type="1"
            ref="structurecell"
          />
        </div>
        <div class="initTable_search" v-if="ccForm.type == '2'">
          <span>选择抄送人员：</span>
          <xh-struc-user-cell-mul
            :curVal="this.ccForm.simpleUserList"
            @valueChange="userChange"
            type="1"
            ref="usermul"
          />
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sureClick">确 定</el-button>
      <el-button @click="closeView">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  selectExamineCCByExamineId,
  deleteExamineCc,
  addExamineCC,
  updateExamineCc,
} from "@/api/examine";

import { roleListAPI } from "@/api/admin/employeeDep";
import XhStructureCellMul from "@/components/CreateCom/XhStructureCellMul";
import XhStructureCell from '@/components/CreateCom/XhStructureCell'
import XhUserCell from '@/components/CreateCom/XhUserCell'
import XhStrucUserCellMul from "@/components/CreateCom/XhStrucUserCellMul";

export default {
  name: "ccCreate", // 文件导入
  components: {
    XhStructureCellMul,
    XhStructureCell,
    XhUserCell,
    XhStrucUserCellMul
  },

  props: {
    show: {
      type: Boolean,
      default: false,
    },
    examineId: {
      type: Number,
      default: null,
    },
    action: {
      type: Object,
      default: () => {
        return {
          type: "save",
        };
      },
    },
  },
  data() {
    return {
      loading: false,
      ccForm: {
        type: 0, // 0角色1部门2人员
        roleId: [], // 角色
        deptId: [], // 部门
        userId: [], // 人员
        simpleRoleList:[],
        simpleDeptList:[],
        simpleUserList:[],
      },
      groupsList: [],
      userList:[],
      ccId:null,
      ccInfo:null
    };
  },
  watch: {
    show(value) {
      if (value) {
        this.initData();
      }
    },
  },

  onload() {},

  methods: {
    initData() {
      this.initInfo();
      this.getRoleList();
    },
    async initInfo() {
      let params = {
        examineId: this.examineId,
      };
      const res = await selectExamineCCByExamineId(params);
      if(res&&res.data){
        this.ccId = res.data.id;
        this.ccInfo = res.data;
      }else{
        this.ccId = null;
        this.ccInfo = null;
      }
      this.initForm();
    },
    initForm(){
      let m = this.ccInfo;
      this.ccForm = {
        type: m&&m.type || 0, // 0角色1部门2人员
        roleId: m&&JSON.parse(m.roleId)||[], // 角色
        deptId: m&&JSON.parse(m.deptId)||[], // 部门
        userId: m&&JSON.parse(m.userId)||[], // 人员
        simpleDeptList:m&&m.simpleDeptList ||[],
        simpleUserList:m&&m.simpleUserList||[]
      }
    },
    // 获取角色列表
    getRoleList() {
      roleListAPI()
        .then((res) => {
          this.groupsList = res.data;
        })
        .catch(() => {});
    },
    roleChange(){
      this.ccForm.roleId = [];
      this.ccForm.deptId = [];
      this.ccForm.userId = [];
      this.ccForm.simpleDeptList = [];
      this.ccForm.simpleUserList = [];
    },
    //部门选择器
    structureChangeRoi(e) {
      if (e.value.length > 0) {
        this.ccForm.deptId = e.value;
      } else {
        this.ccForm.deptId = [];
      }
    },
    // 人员选择器
    userChange(e) {
      if (e.value.length > 0) {
        this.ccForm.userId = e.value;
      } else {
        this.ccForm.userId = [];
      }
    },
    sureClick(){
      let m = this.ccForm;
      if(m.deptId.length<1 && m.userId.length<1 && m.roleId.length<1){
        this.$message({
          type: 'warning',
          message: '请选择抄送对象'
        })
        return;
      }
      if(this.ccId){
        this.updateClick()
      }else{
        this.saveClick()
      }
    },
    // 保存
    async saveClick() {
      let params = {
        examineId:this.examineId,
        type:this.ccForm.type,
        deptId:this.ccForm.deptId,
        userId:this.ccForm.userId,
        roleId:this.ccForm.roleId
      }
      const res = await addExamineCC(params);
      if (res && res.data) {
        this.closeView();
      }
    },
    // 更新
    async updateClick() {
      let params = {
        id: this.ccId,
        examineId:this.examineId,
        type:this.ccForm.type,
        deptId:this.ccForm.deptId,
        userId:this.ccForm.userId,
        roleId:this.ccForm.roleId
      }
      const res = await updateExamineCc(params);
      if (res && res.data) {
        this.closeView();
      }
    },
    closeView() {
      this.$emit("update:show", false);
    },
  },
};
</script>

<style scoped lang="scss">
.create-dialog /deep/ .el-dialog__body {
  padding-top: 0 !important;
}
.cc-box{
  height: 240px;
}
.label-title {
  display: block;
  margin: 20px 0 10px 0;
  color: #666;
}

.label-input {
  position: relative;
}
.initTable_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20px;
  padding: 0 10px;

  span {
    white-space: nowrap;
  }
  .el-select {
    width: 80%;
  }
}
/deep/ .block .block_reshow {
  width: 600px;
}
</style>
